<!--买家进入页面 前提是卖家拒绝退货-->
<template>
	<div>
		<van-nav-bar
		  title="客服介入详情(买家)"
		  left-arrow
		  @click-left="customBackUrl"
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>	
	    
	    <!--买家发起客服介入后 未上传凭证前-->
	    <div class="tips" v-if="info.processState==0">
	    	<div style="margin-bottom: 10px;font-size: 14px;">请提供凭证</div>
	    	<div style="display: flex;align-items: center;">
	    		<div>还剩 </div>
	    		<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" @finish="finishTimer"/>
	    	</div>
	    </div>

        <!--买家上传凭证后 卖家未上传凭证前-->
	    <div class="tips" v-if="info.processState==1">
	    	<div style="margin-bottom: 10px;font-size: 14px;">请等待卖家提供凭证</div>
	    	<div style="display: flex;align-items: center;">
	    		<div>还剩 </div>
	    		<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" @finish="finishTimer"/>
	    	</div>	    	
	    </div>
	    
	    
	    <!--卖家上传凭证后 且未点击拒绝申请按钮-->
	    <div class="tips" v-if="info.processState==3">
	    	<div style="margin-bottom: 10px;font-size: 14px;">请等待卖家查看提供凭证并处理</div>
	    	<div style="display: flex;align-items: center;">
	    		<div>还剩 </div>
	    		<van-count-down :time="time" format="DD 天 HH 时 mm 分" @finish="finishTimer"/>
	    	</div>	    	
	    </div>	    


	    <!--卖家上传凭证后 且点击拒绝申请按钮-->
	    <div class="tips" v-if="info.processState==5">
	    	<div style="margin-bottom: 10px;font-size: 14px;">进入集市小法庭</div>    	
	    </div>	  


	    
	    
	    
	    <!--买家发起客服介入后 未上传凭证前-->
	    <div class="steps" v-if="info.processState==0">	 
	    	<div class="steps_wrap">
				<van-steps direction="vertical" :active="0" active-color="#FFD630" style="flex: 1;">
				  <van-step>
				    <div class="word1">买家申请客服介入</div>
				    <div class='word2'>{{info.addtime}}</div>
				  </van-step>
				  <van-step>
				    <div class="word1">等待买家上传凭证</div>
				    <div>
				    	<div>
					    	<span class='word3'>请上传凭证：【退货快递单和双方协商一致的 聊天记录】</span>
					    	<span class='word4' @click="seePz" v-if="info.refundImg">查看凭证</span>			    		
				    	</div>
				    	<div class='word3'>提交后小二将根据您的凭证做出处理 逾期未提交，申请将自动关闭</div>
				    </div>
				  </van-step>
				  <van-step>
				    <div class='word1'>卖家处理</div>
				  </van-step>
				</van-steps>
				<div style="padding-left: 32px;" @click="statusDetail">
					<van-icon name="arrow" color="#999"/>
				</div>
			</div>			
			<div class='action'>
				<div class="actionBtn" @click="edit">修改申请</div>
				<div class="actionBtn" @click="cancelApply">撤销申请</div>
				<div class="actionBtn active" @click="confirmPz" v-if="!info.refundImg">提交凭证</div>
			</div>
	    </div>
	    
	    
	    
	    <!--买家上传凭证后 卖家未上传凭证前-->
	    <div class="steps" v-if="info.processState==1">	 
	    	<div class="steps_wrap">
				<van-steps direction="vertical" :active="1" active-color="#FFD630" style="flex: 1;">
				  <van-step>
				    <div class="word1">买家申请客服介入</div>
				    <div class='word2'>{{info.addtime}}</div>
				  </van-step>
				  <van-step>
				    <div class="word1">请等待卖家上传凭证</div>
				    <div>
				    	<div>
					    	<span class='word3'>还需卖家提供凭证,请耐心等待 </span>
					    	<span class='word4' @click="seePz" v-if="info.refundImg">查看凭证</span>			    		
				    	</div>
				    	<div class='word3'>在此期间你可以和卖家积极协商</div>
				    </div>
				  </van-step>
				  <van-step>
				    <div class='word1'>卖家处理</div>
				  </van-step>
				</van-steps>
				<div style="padding-left: 32px;" @click="statusDetail">
					<van-icon name="arrow" color="#999"/>
				</div>
			</div>			
			<div class='action'>
				<div class="actionBtn" @click="cancelApply">撤销申请</div>
			</div>
	    </div>	    
	    
	    <!--卖家上传凭证后 且未点击拒绝申请按钮-->
	    <div class="steps" v-if="info.processState==3">	 
	    	<div class="steps_wrap">
				<van-steps direction="vertical" :active="1" active-color="#FFD630" style="flex: 1;">
				  <van-step>
				    <div class="word1">上传凭证</div>
				    <div class='word2'>{{info.imgTime}}</div>
				  </van-step>
				  <van-step>
				    <div class="word1">卖家处理</div>
				    <div>
				    	<div>
					    	<span class='word3'>卖家在规定时间内未处理,闲鱼小法庭将介入并对凭证进行审核 </span>					    			    		
				    	</div>
				    	<div class='word3'>如果问题已解决,请点击撤销申请</div>
				    	<div class='word3'>撤销后若超出保障期,将无法再次发起售后申请</div>
				    </div>
				  </van-step>
				  <van-step>
				    <div class='word1'>分配小二</div>
				  </van-step>
				</van-steps>
				<div style="padding-left: 32px;" @click="statusDetail">
					<van-icon name="arrow" color="#999"/>
				</div>
			</div>			
			<div class='action'>
				<div class="actionBtn" @click="cancelApply">撤销申请</div>
			</div>
	    </div>	 	    
	    
	    <!--卖家上传凭证后 且点击拒绝申请按钮-->
	    <div class="steps" v-if="info.processState==5">	 
	    	<div class="steps_wrap">
				<van-steps direction="vertical" :active="1" active-color="#FFD630" style="flex: 1;">
				  <van-step>
				    <div class="word1">分配小二</div>
				  </van-step>
				  <van-step>
				    <div class="word1">集市小法庭处理中</div>
				  </van-step>
				  <van-step>
				    <div class='word1'>维权完结</div>
				  </van-step>
				</van-steps>
				<div style="padding-left: 32px;" @click="statusDetail">
					<van-icon name="arrow" color="#999"/>
				</div>
			</div>			
			<div class='action'>
				<div class="actionBtn" @click="cancelApply">撤销申请</div>
				<div class="actionBtn" @click="result">集市小法庭</div>
			</div>
	    </div>	




	    
	    <div class="next"></div>
	    
	    
	    
	    <div class="voucher">
	    	<div class="title">协商凭证</div>
	    	<div v-if="info.refundImg">
		    	<div class="subTitle">您已上传的凭证</div>
		    	<div class="img_wrap">
		    		<div v-for="(item,index) in formatArr(info.refundImg)"
		    			:style="{backgroundImage: 'url(' + item + ')'}"
		    			 class="img">
		    		</div>
		    	</div>
	    	</div>
	    	<div v-if="info.refundImg1">
		    	<div class="subTitle">卖家上传的凭证</div>
		    	<div class="img_wrap">
		    		<div v-for="(item,index) in formatArr(info.refundImg1)"
		    			:style="{backgroundImage: 'url(' + item + ')'}"
		    			 class="img">
		    		</div>
		    	</div>
	    	</div>
	    </div>
	    
	    <div class="next"></div>
	    
	    <van-cell title="协商历史" is-link @click="linkHistory" style="padding-left: 20px;"/>
	    
	    
	    <div class="next"></div>
	    <div style="padding: 0 20px;">
	    	<floor58 :data="logList" :info="goodsInfo"></floor58>
	    </div>	
	    
	    <floor59 ref="floor59" @seePz="seePz" :info="info"></floor59>
	    <floor60 ref="floor60" :imgList="formatArr(info.refundImg)"></floor60>
	    
	    <confirm ref="confirm" @queryConfirm="queryConfirm" title="确定要撤销申请吗?"></confirm>  
	</div>	
</template>

<script>
import '@/assets/reset/buyDetail.css'	
import {getFun} from '@/api/publicFun.js'	
import floor58 from '_c/market/floor/floor58.vue'
import floor59 from '_c/market/floor/floor59.vue'
import floor60 from '_c/market/floor/floor60.vue'
import confirm from '_c/confirm.vue'
let publicFun=getFun()	
export default {
	components: {
	   floor58,floor59,floor60,confirm
	},		
	data() {
       return {
       	  userId:'',
          refundId:'', // 退款ID          
          time: 1000,  // 剩余时间
          id:'',
          url1:this.$api+'/marketorderservice/api/v1/market/getCustomerServiceByRefundId',
          url2:this.$api+'/marketorderservice/api/v1/market/refund/log/list', 
          url3:this.$api+'/marketorderservice/api/v1/market/orders', // 获取订单详情的接口
          url4:this.$api+'/marketorderservice/api/v1/market/updateCustomerCancel', // 撤销客服介入申请
          url5:this.$api+'/marketorderservice/api/v1/market/getcourtSupportByRefundId',
          info:{},  // 客服介入信息
          logList:{}, // 订单信息
          goodsInfo:{}, // 商品信息
          ordersId:''
       }
	},
	methods: {
	   // 查看客服有没有提交评审结果，提交了就返回IM页面 
	   // 没有提交就返回之前发起页面		
	   customBackUrl(){
	   	 let that=this
	   	 // console.log(that.goodsInfo.snickName,that.goodsInfo.goodsId,that.goodsInfo.userId,that.goodsInfo.suserId,that.goodsInfo.goodsImage,that.goodsInfo.savatar,that.goodsInfo.ordersId)
	   	 this.$Axios2.Get(this.url5+'/'+this.refundId).then(function(res){ 
	   	     if(res.data){
	   	     	that.closeWinToIm(that.goodsInfo.snickName,that.goodsInfo.goodsId,that.goodsInfo.userId,that.goodsInfo.suserId,that.goodsInfo.goodsImage,that.goodsInfo.savatar,that.goodsInfo.ordersId)	   	     	
	   	     }else{
	   	     	that.closeWin()
	   	     }
	   	 })
	   },
	   // 查看小法庭结果
	   result(){
		 let arg='[{"refundId":"'+this.refundId+'"}]'
		 this.link('/market/intervention/result',arg)	   	
	   },
	   // 修改申请
	   edit(){	   	 
		 let arg='[{"refundId":"'+this.refundId+'"},{"ordersId":"'+this.ordersId+'"}]' 
		 let url=this.concatUrl('/market/orders/modify',arg)
		 this.goNewWin(url)	  		 
	   },
	   // 删除撤销申请
	   queryConfirm(){
       	 let that=this
       	 this.$Axios2.Get(this.url4+'/'+ this.refundId).then(function(res){ 
//		   	 let arg='[{"ordersId":"'+that.ordersId+'"}]'
//		   	 that.link('/market/orders/details',arg)
             that.closeWinToIm(that.goodsInfo.snickName,that.goodsInfo.goodsId,that.goodsInfo.userId,that.goodsInfo.suserId,that.goodsInfo.goodsImage,that.goodsInfo.savatar,that.goodsInfo.ordersId)
       	 })	   
	   },		
	   // 撤销申请按钮
	   cancelApply(){
            this.$refs.confirm.showWin()	 
	   },
	   // 跳转协商历史
	   linkHistory(){
	   	  let arg='[{"refundId":"'+this.refundId+'"}]'
	   	  this.link('/market/orders/history',arg)	   	 
	   },
	   // 倒计时结束的时候触发
	   finishTimer(){
	   	 this.showTips=false
	   	 // this.getData()
	   },
	   // 获取详情
	   getData(){
       	 let that=this
       	 // 获取介入信息
       	 this.$Axios2.Get(this.url1+'/'+this.refundId).then(function(res){ 
       	 	if(res.data){
	            that.info=res.data
	            let timer=res.data.remainingTime
	            if(timer){
	            	that.time=timer
	            }       	 		
       	 	}
       	 })
         // 获取订单信息
       	 this.$Axios2.Post(this.url2,{refundId:this.refundId}).then(function(res){          	   
           that.logList=res.data.refundRVo.refund
           that.ordersId=res.data.refundRVo.refund.ordersId
	       that.$Axios2.Get(that.url3+'/'+that.ordersId+'/'+that.userId).then(function(result){   
	          that.goodsInfo=result.data.orders
	       })              
       	 })         	 
	   },
	   // 查看介入详情	
       statusDetail(){
       	  this.$refs.floor59.showWin()
       },
       // 查看凭证
       seePz(){
       	  this.$refs.floor60.showWin()
       },
       // 提交凭证
       confirmPz(){
       	  let arg='[{"cid":"'+this.info.id+'"}]'
       	  this.link('/market/intervention/voucher',arg)
       }
	},
	mixins:[publicFun],//混入		
	mounted() {
         this.refundId=this.$router.currentRoute.query.refundId;
         this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
.tips{background: #FFD630;padding: 35px 20px;}
.steps{padding: 15px 10px 0;}
.steps_wrap{display: flex;align-items: center;}
.word1{color: #333;font-size: 13px;margin-bottom: 13px;}
.word2{color: #999;font-size: 12px;}
.word3{color: #333;font-size: 12px;}
.word4{color: #3CACEC;font-size: 12px;}
.next{background: #f8f8f8;height: 5px;}
.voucher{padding: 0 20px;
  .title{padding: 20px 0;font-size: 14px;color: #333;}
  .subTitle{font-size: 12px;color: #999;}
  .img_wrap{display: flex;flex-wrap: wrap;padding: 15px 0;
     .img{width: 80px;height: 80px;margin-right: 10px;margin-bottom: 10px;
     overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;}
     .img:nth-child(3n){margin-right: 0;}
  }
}

.action{display: flex;justify-content: flex-end;padding: 0 0 10px 0;
  .actionBtn{border: 1px solid #666;padding: 5px 9px;margin-right: 10px;border-radius: 10px;}
  .actionBtn.active{border: 1px solid #FFD630;}
  .actionBtn:nth-child(3n){margin-right: 0;}
}
</style>